<template>
    <view
        :class="'container-mask ' + (center ? 'center' : '') + ' l-class'"
        v-if="!(showClone ? '' : 'hidden')"
        @touchmove.stop.prevent="doNothingMove"
        @tap.stop.prevent="onMaskTap"
        :style="'z-index:' + zIndex + '; ' + (showClone ? 'background: rgba(0,0,0,' + opacity + ')' : '')"
    >
        <view class="mask-content l-mask-class">
            <slot></slot>
        </view>
    </view>
</template>

<script>
import zIndex from '../behaviors/zIndex';
export default {
    data() {
        return {
            showClone: false
        };
    },

    mixins: [zIndex],
    externalClasses: ['l-class', 'l-mask-class'],

    props: {
        show: {
            type: Boolean,
            default: false
        },
        opacity: {
            type: [String, Number],
            default: 0.4
        },
        zIndex: {
            type: Number,
            default: 99
        },
        center: {
            type: Boolean,
            default: false
        },
        locked: {
            type: Boolean,
            default: true
        },
        fullScreen: {
            type: String,
            default: ''
        },
        NavColor: {
            type: String,
            default: ''
        }
    },

    methods: {
        attached: function () {},
        doNothingMove() {},

        onMaskTap() {
            if (true !== this.locked) {
                this.setData({
                    showClone: false
                });
            }
            this.$emit(
                'lintap',
                {
                    detail: true
                },
                {
                    bubbles: true,
                    composed: true
                }
            );
        }
    },

    mounted() {
        // 处理小程序 attached 生命周期
        this.attached();
    },

    created: function () {}
};
</script>
<style>
.container-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all 0.3s;
}
.mask-bg {
    height: 100%;
    width: 100%;
    background: #fff;
    z-index: 99;
}
.mask-content {
    display: inline-block;
    z-index: 101;
    overflow: hidden;
}
.center {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
</style>
